<template>
  <div>
    <!--<div class="sc-launcher" :class="{opened: isOpen}" @click.prevent="isOpen ? close() : open()">-->
    <div :class="{opened: isOpen}" @click.prevent="isOpen ? close() : open()">
      <div v-if="newMessagesCount > 0 && !isOpen" class="sc-new-messsages-count">
        {{newMessagesCount}}
      </div>
      <!--<img class="sc-open-icon" src="./assets/close-icon.png" />-->
      <!--<img class="sc-closed-icon" src="./assets/logo-no-bg.svg" />-->
      <i class="iconfont icon-jiqirenduihua1" style="font-size: 26px; cursor: pointer;"></i>
      <!-- <img class="img" src=".././../../static/img/rabot.png" height="17" width="19" alt=""> -->
    </div>
    <ChatWindow
      :messageList="messageList"
      :onUserInputSubmit="onMessageWasSent"
      :agentProfile="agentProfile"
      :isOpen="isOpen"
      :onClose="close"
      :showEmoji="showEmoji"
      :showFile="showFile"
    />
  </div>
</template>
<script>
  import ChatWindow from './ChatWindow.vue'

  export default {
    props: {
      showEmoji: {
        type: Boolean,
        default: false
      },
      isOpen: {
        type: Boolean,
        required: true
      },
      open: {
        type: Function,
        required: true
      },
      close: {
        type: Function,
        required: true
      },
      showFile: {
        type: Boolean,
        default: false
      },
      agentProfile: {
        type: Object,
        required: true
      },
      onMessageWasSent: {
        type: Function,
        required: true
      },
      messageList: {
        type: Array,
        default: () => []
      },
      newMessagesCount: {
        type: Number,
        default: () => 0
      }
    },
    data () {
      return {

      }
    },
    components: {
      ChatWindow
    }
  }
</script>
<style scoped>
  .img {
    vertical-align: middle;
    cursor:pointer;
  }
  .sc-launcher {
    width: 60px;
    height: 60px;
    background-color: #4e8cff;
    background-position: center;
    background-repeat: no-repeat;
    position: fixed;
    right: 25px;
    /*bottom: 25px;*/
    top: 0;
    border-radius: 50%;
    box-shadow: none;
    transition: box-shadow 0.2s ease-in-out;
    cursor: pointer;
  }

  .sc-launcher:before {
    content: '';
    position: relative;
    display: block;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    transition: box-shadow 0.2s ease-in-out;
  }

  .sc-launcher .sc-open-icon,
  .sc-launcher .sc-closed-icon {
    width: 60px;
    height: 60px;
    position: fixed;
    right: 25px;
    /*bottom: 25px;*/
    top: 0;
    transition: opacity 100ms ease-in-out, transform 100ms ease-in-out;
  }

  .sc-launcher .sc-closed-icon {
    transition: opacity 100ms ease-in-out, transform 100ms ease-in-out;
    width: 60px;
    height: 60px;
  }

  .sc-launcher .sc-open-icon {
    padding: 20px;
    box-sizing: border-box;
    opacity: 0;
  }

  .sc-launcher.opened .sc-open-icon {
    transform: rotate(-90deg);
    opacity: 1;
  }

  .sc-launcher.opened .sc-closed-icon {
    transform: rotate(-90deg);
    opacity: 0;
  }

  .sc-launcher.opened:before {
    box-shadow: 0px 0px 400px 250px rgba(148, 149, 150, 0.2);
  }

  .sc-launcher:hover {
    box-shadow: 0 0px 27px 1.5px rgba(0,0,0,0.2);
  }

  .sc-new-messsages-count {
    position: absolute;
    top: -3px;
    left: 41px;
    display: flex;
    justify-content: center;
    flex-direction: column;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    background: #ff4646;
    color: white;
    text-align: center;
    margin: auto;
    font-size: 12px;
    font-weight: 500;
  }
</style>
